<template>
	<w-container id="container">
		<!-- 自定义导航 -->
		<w-navbar id="navbarStyle"></w-navbar>
		<!-- <w-image src="/static/icon/logo-text.png" :width="206" :height="177" class="top-img"></w-image> -->
		<!-- 中心区域 -->
		<view class="login_center">
			<view class="loginInput">
				<view class="title">
					<view class="font-size-17 font-color-dark font-w-600">{{handleLang('忘记密码')}}</view>
				</view>
				<view class="flex flex-ai-center mt-30">
					<w-icon name="login_phone" size="20"></w-icon>
					<text class="font-color-textPrimary font-size-16 font-w-500 ml-5">手机号</text>
				</view>
				<view class="iptStyle mt-10">
					<u-input v-model="mobile" placeholderStyle="{color:'#222'}" :customStyle="iptStyle" clearable
						:placeholder="handleLang('请输入手机号')" border="bottom" fontSize="14" :color="inputColor">
						<!-- <view slot="prefix" class="mr-20">手机号 </view> -->
					</u-input>
				</view>
				<w-button class="login_btn mb-16" type="colorful" shape="circle"
					@click="getCode">{{handleLang('获取验证码')}}</w-button>
				<w-agreement v-model="checked">
					<template>
						{{handleLang('未注册的手机号将会自动创建账号，登录即代表您同意并接受')}}
						<text class="font-color-subtitle"
							@tap.stop="toWebview('/index/index/agreement')">{{handleLang('《用户隐私协议》')}}</text>
						和
						<text class="font-color-subtitle"
							@tap.stop="toWebview('/index/index/usageterms')">{{handleLang('《服务协议》')}}</text>
					</template>
				</w-agreement>
			</view>
		</view>
		<!-- 底部协议 -->
		<!-- <view class="agreement">
			<w-agreement v-model="checked">
				<template>
					{{handleLang('未注册的手机号将会自动创建账号，登录即代表您同意并接受')}}
					<text class="font-color-textPrimary" @tap.stop="toWebview('/index/index/agreement')">{{handleLang('《用户隐私协议》')}}</text>
					和
					<text class="font-color-textPrimary" @tap.stop="toWebview('/index/index/usageterms')">{{handleLang('《服务协议》')}}</text>
				</template>
			</w-agreement>
			<u-safe-bottom></u-safe-bottom>
		</view> -->
	</w-container>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				iptStyle: { //  输入框样式
					'height': '80rpx',
					'padding': '24rpx 32rpx',
					 background:'#fff',
					"borderRadius":"16rpx"
				},
				inputColor:'#222,',
				mobile: '',
				checked: false //  协议勾选
			};
		},
		computed: {
			...mapState('config', {
				isAgreement(state) {
					return state.info.isAgreement
				},
				logo(state) {
					return state.info.appLogo
				},
			})
		},
		watch: {
			isAgreement: {
				handler: function(val) {
					this.checked = val == 1 ? true : false
				},
				immediate: true
			}
		},
		methods: {
			getCode() {
				if (!this.checked) {
					uni.$u.toast('请先勾选用户协议');
					return
				} else if (!this.mobile) {
					uni.$u.toast('请输入手机号');
					return
				} else if (!uni.$u.test.mobile(this.mobile)) {
					uni.$u.toast('请输入正确的手机号');
					return
				}
				uni.$u.route('/pages/login/verification', {
					mobile: this.mobile
				});
			}
		}
	}
</script>

<style lang="scss">
	page{ background-color: #fff }
	#container {
		@extend .flex, .flex-dir-col;
		background-repeat: no-repeat;
	}
	.top-img{
		margin: 30rpx auto 0;
	}
	#navbarStyle /deep/ .u-navbar__content {
		// background-image: url($IMG_URL + '/static/bg/loginbg.png');
		background-position: top;
		background-size: 100% auto;
	}

	.login_center {
		margin-top: 74rpx;
		 width: 100%;
		 padding: 0 60rpx;
		.loginInput {
			background: #F5F5F5;
			border-radius: 16rpx;
			padding: 43rpx 64rpx;
			>.title {
				width: 100%;
				text-align: center;
				margin-bottom: 30rpx;
			}
			
			>.iptStyle {
				width: 100%;
			
				.u-border-bottom {
					border-color: transparent !important;
				}
			}
			
			>.login_btn {
				width: 100%;
				margin-top: 90rpx;
				// box-shadow: 0 20rpx 30rpx rgba(223, 0, 7, .1);
			}
		}

		

	}

	.agreement {
		width: 100%;
		padding: 0 80rpx 40rpx;
	}
</style>